<template>
  <div>
    <h1>购物车</h1>
    <el-row>
      <el-col v-for="cart in shoppingCartList" :key="cart.user_id" :span="40">
        <CartItem :cart="cart" :userName="getUserName(cart.user_id)" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CartItem from "@/components/CartItem.vue";

export default {
  name: "CartView",
  components: {
    CartItem,
  },
  computed: {
    shoppingCartList() {
      return (
        this.$store.state.shoppingCart.shoppingCartList ||
        JSON.parse(localStorage.getItem("vuex-shoppingCart"))
      );
    },
    users() {
      return (
        this.$store.state.user.userList ||
        JSON.parse(localStorage.getItem("vuex-users"))
      );
    },
    loginPerson() {
      return (
        this.$store.state.loginPerson ||
        JSON.parse(localStorage.getItem("loginPerson"))
      );
    },
  },
  methods: {
    getUserName(userId) {
      const user = this.users.find((u) => u.id === userId);
      return user ? user.username : "未知用户"; // 返回用户名称或默认值
    },
  },
  created() {
    this.$store.dispatch("shoppingCart/getShoppingCartList"); // 获取购物车列表
    this.$store.dispatch("user/loadUserList"); // 获取用户列表
    this.$store.dispatch("order/getOrderList"); // 获取订单列表
  },
};
</script>

<style scoped>
/* 添加样式 */
</style>
